import React,{Component} from 'react';
import {Route,Link} from 'react-router-dom';
import HeadBack from '../../components/headBack';
import {getBrand,getBrandStyle} from '../../utils/localData';
import {ScrollTop} from '../../utils/DomApi';
import LazyLoad from 'react-lazyload';
import './style.scss'
import ImgList from "../../components/imgList";
import connectRoute from "../../utils/connectRoute";
import Detail from "../detail";
const HDetail = connectRoute(Detail);
export default class extends Component {
    constructor(props){
       super(props)
       const {id}=this.props.match.params;
       this.state={
           brandItem:getBrand(id),
           activeId:getBrand(id).contentList[0].id
       }
    }
    componentWillUnmount(){

    }
    clickItem(id){
        console.log(this.props.match.url)
        this.props.history.push(this.props.match.url+'/detail/'+id)
    }
    setActive(id){
        this.setState(()=>{
            return {
                activeId:id
            }
        });
        ScrollTop(0);
    }
    render(){
        console.log(this.props)
        const {brandItem,activeId}=this.state;
        return (<div className={'brandClass'}>
            <HeadBack  {...this.props}  title={brandItem.name}></HeadBack>
            <div className={'brandClass_nav'}>
                <ul>
                    {
                        brandItem.contentList.map((item,index)=>{
                            return <li onClick={()=>{this.setActive(item.id)}} key={item.id} className={item.id==activeId?'active':''}>{item.name}</li>
                        })
                    }
                </ul>
            </div>
            <div >
                <ImgList  clickItem={this.clickItem.bind(this)}  imgList={getBrandStyle(activeId).contentList}></ImgList>
            </div>
            <Route path={this.props.match.url+'/detail/:id'}  component={HDetail}/>
        </div>)
    }
}